<template>
  <!-- 列设置  -->
  <el-drawer v-model="drawerVisible" :title="_transitionLanguages('table', 'ColumnSettings')" size="450px">
    <div class="table-main">
      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
        <el-table-column align="center" :label="_transitionLanguages('table', 'columnName')">
          <template #default="scope">
            <span>{{ _transitionLanguages('table', scope.row.label) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-slot="scope" prop="isShow" align="center" :label="_transitionLanguages('table', 'show')">
          <el-switch v-model="scope.row.isShow"></el-switch>
        </el-table-column>
        <el-table-column v-slot="scope" prop="sortable" align="center" :label="_transitionLanguages('table', 'sort')">
          <el-switch v-model="scope.row.sortable"></el-switch>
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>{{ _transitionLanguages('basic', 'NoColumnsAreAvailable') }}</div>
          </div>
        </template>
      </el-table>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="ColSetting">
import { ref } from 'vue';
import { ColumnProps } from '@/components/ProTable/interface';

defineProps<{ colSetting: ColumnProps[] }>();

const drawerVisible = ref<boolean>(false);

const openColSetting = () => {
  drawerVisible.value = true;
};

defineExpose({
  openColSetting
});
// 语言转换
const _transitionLanguages = (v: string, l: string): string => {
  return transitionLanguages(v, l);
};
</script>

<style scoped lang="scss">
.cursor-move {
  cursor: move;
}
</style>
